/* @flow */
'use strict';

var React = require('react-native');

var {
	StyleSheet,
	View,
	WebView,
	Text
} = React;

var WebViewComponent = React.createClass({

	goBack: function() {
		this.refs['WEBVIEW_REF'].goBack();
	},

	goForward: function() {
		this.refs['WEBVIEW_REF'].goForward();
	},

	reload: function() {
		this.refs['WEBVIEW_REF'].reload();
	},

	render: function() {
		return (
			<View style={styles.contentStyle}>
				<WebView 
					ref={'WEBVIEW_REF'}
          			automaticallyAdjustContentInsets={false}
          			style={styles.webView}
         			url={"http://www.baidu.com"}/>
				<View style={styles.controlStyle}>
					<Text onPress={this.goBack} 
						  style={styles.buttonStyle}>Go Back</Text> 
					<Text onPress={this.goForward} 
					      style={styles.buttonStyle}>Go Forward</Text> 
					<Text onPress={this.reload} 
					      style={styles.buttonStyle}>Reload</Text>
				</View>
			</View>
		);
	}
});


var styles = StyleSheet.create({

	contentStyle: {
		flex: 1,
		marginTop: 64
	},
	controlStyle: {
		marginBottom: 0,
		height: 40,
		backgroundColor: '#E0F4FB',
		flexDirection: 'row'
	},
	webView: {
		height: 350
	},

	buttonStyle: {
		height: 24,
		padding: 3,
		marginLeft: 8,
		alignItems: 'center'
	}
});


module.exports = WebViewComponent;